<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>五十音图</title>
    <link rel="stylesheet" href="public/css/bootstrap.min.css">
    <link rel="stylesheet" href="public/css/style.css">
</head>
<body>
<nav class="navbar navbar-inverse" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">五十音图</a>
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div id="navbar" class="collapse navbar-collapse"aria-expanded="true">
            <ul class="nav navbar-nav nav-pills nav-stacked">
                <li role="presentation"><a href="gojuonzu.html" style="margin-top: 2px;">假名学习</a></li>
                <li role="presentation"><a href="testhiragana.html">平假名测试</a></li>
                <li role="presentation" class="active"><a href="#">平假名听音测试</a></li>
                <li role="presentation"><a href="testkatakana.html">片假名测试</a></li>
                <li role="presentation"><a href="testkatakanavoice.html">片假名听音测试</a></li>
                <li role="presentation"><a href="hira-kata.html">平假名对应测试</a></li>
                <li role="presentation"><a href="kata-hira.html">片假名对应测试</a></li>
            </ul>
        </div>
    </div>
</nav>
<div class="row clearmargin text-center" id="testhiragana">
    <div class="col-lg-2 col-md-1 rowdisplaynone clearpadding"><label></label></div>
    <div class="col-lg-8 col-md-10 col-sm-12 col-xs-12 clearpadding" :class="{displaynone : isOver}">
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"><label class="btn-success">正确:{{rightkananumber}}</label></div>
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"><label>剩余:{{remainder}}</label></div>
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"><label class="btn-danger">错误:{{wrongkananumber}}</label></div>
        <div class="">
            <label class="testkana img-thumbnail " @click="autoPlay()">{{showkana.romaji}}</label>
        </div>

        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 paddingblock">
            <button class="btn btn-lg btn-block testanswer" @click="validate(1)" :class="[colorbutton[1].color,colorbutton[0].disabled]">{{answerkanas[1].hiragana}}</button>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 paddingblock">
            <button class="btn btn-lg btn-block testanswer" @click="validate(2)" :class="[colorbutton[2].color,colorbutton[0].disabled]">{{answerkanas[2].hiragana}}</button>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 paddingblock">
            <button class="btn btn-lg btn-block testanswer" @click="validate(3)" :class="[colorbutton[3].color,colorbutton[0].disabled]">{{answerkanas[3].hiragana}}</button>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 paddingblock">
            <button class="btn btn-lg btn-block testanswer" @click="validate(4)" :class="[colorbutton[4].color,colorbutton[0].disabled]">{{answerkanas[4].hiragana}}</button>
        </div>
        <audio id="autoPlay" style="display: none" :src="voice"></audio>
    </div>
    <div class="col-lg-8 col-md-10 col-sm-12 col-xs-12" v-if="isOver">
        <h1 class="kana">错误数量:{{wrongkananumber}}</h1>
        <div class="row">
            <div class="col-lg-2 col-md-2 col-sm-4 col-xs-4 paddingblock" v-for="kana in wrongkanas">
                <button class="btn kana" :title="kana.romaji" @click="playvoice(kana.hiragana)">
                    {{kana.hiragana}}
                </button>
            </div>
        </div>
        <audio id="playVoice" style="display: none" :src="voice"></audio>
    </div>
    <div class="col-lg-2 col-md-1 rowdisplaynone clearpadding"><label></label></div>
</div>

<script type="text/javascript" src="public/js/jquery.min.js" ></script>
<script type="text/javascript" src="public/js/bootstrap.js"></script>
<script type="text/javascript" src="public/js/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#testhiragana',
        data: {
            remainder: 0,
            rightkananumber: 0,
            wrongkananumber: 0,
            isOver: false,
            testkanas: [],
            kanaboxs:[],
            showkana: [],
            wrongkanas: [],
            answerkanas: [[], [], [], [], []],
            colorbutton: [[], [], [], [], []],
            voice : '',
            answered : false,
            kanas: [
                {
                    hiragana: 'あ',
                    romaji: 'a',
                    number:0
                }, {
                    hiragana: 'い',
                    romaji: 'i',
                    number:1
                }, {
                    hiragana: 'う',
                    romaji: 'u',
                    number:2
                }, {
                    hiragana: 'え',
                    romaji: 'e',
                    number:3
                }, {
                    hiragana: 'お',
                    romaji: 'o',
                    number:4
                }, {
                    hiragana: 'か',
                    romaji: 'ka',
                    number:5
                }, {
                    hiragana: 'き',
                    romaji: 'ki',
                    number:6
                }, {
                    hiragana: 'く',
                    romaji: 'ku',
                    number:7
                }, {
                    hiragana: 'け',
                    romaji: 'ke',
                    number:8
                }, {
                    hiragana: 'こ',
                    romaji: 'ko',
                    number:9
                }, {
                    hiragana: 'さ',
                    romaji: 'sa',
                    number:10
                }, {
                    hiragana: 'し',
                    romaji: 'shi',
                    number:11
                }, {
                    hiragana: 'す',
                    romaji: 'su',
                    number:12
                }, {
                    hiragana: 'せ',
                    romaji: 'se',
                    number:13
                }, {
                    hiragana: 'そ',
                    romaji: 'so',
                    number:14
                }, {
                    hiragana: 'た',
                    romaji: 'ta',
                    number:15
                }, {
                    hiragana: 'ち',
                    romaji: 'chi',
                    number:16
                }, {
                    hiragana: 'つ',
                    romaji: 'tsu',
                    number:17
                }, {
                    hiragana: 'て',
                    romaji: 'te',
                    number:18
                }, {
                    hiragana: 'と',
                    romaji: 'to',
                    number:19
                }, {
                    hiragana: 'な',
                    romaji: 'na',
                    number:20
                }, {
                    hiragana: 'に',
                    romaji: 'ni',
                    number:21
                }, {
                    hiragana: 'ぬ',
                    romaji: 'nu',
                    number:22
                }, {
                    hiragana: 'ね',
                    romaji: 'ne',
                    number:23
                }, {
                    hiragana: 'の',
                    romaji: 'no',
                    number:24
                }, {
                    hiragana: 'は',
                    romaji: 'ha',
                    number:25
                }, {
                    hiragana: 'ひ',
                    romaji: 'hi',
                    number:26
                }, {
                    hiragana: 'ふ',
                    romaji: 'fu',
                    number:27
                }, {
                    hiragana: 'へ',
                    romaji: 'he',
                    number:28
                }, {
                    hiragana: 'ほ',
                    romaji: 'ho',
                    number:29
                }, {
                    hiragana: 'ま',
                    romaji: 'ma',
                    number:30
                }, {
                    hiragana: 'み',
                    romaji: 'mi',
                    number:31
                }, {
                    hiragana: 'む',
                    romaji: 'mu',
                    number:32
                }, {
                    hiragana: 'め',
                    romaji: 'me',
                    number:33
                }, {
                    hiragana: 'も',
                    romaji: 'mo',
                    number:34
                }, {
                    hiragana: 'や',
                    romaji: 'ya',
                    number:35
                }, {
                    hiragana: 'ゆ',
                    romaji: 'yu',
                    number:36
                }, {
                    hiragana: 'よ',
                    romaji: 'yo',
                    number:37
                }, {
                    hiragana: 'ら',
                    romaji: 'ra',
                    number:38
                }, {
                    hiragana: 'り',
                    romaji: 'ri',
                    number:39
                }, {
                    hiragana: 'る',
                    romaji: 'ru',
                    number:40
                }, {
                    hiragana: 'れ',
                    romaji: 're',
                    number:41
                }, {
                    hiragana: 'ろ',
                    romaji: 'ro',
                    number:42
                }, {
                    hiragana: 'わ',
                    romaji: 'wa',
                    number:43
                }, {
                    hiragana: 'を',
                    romaji: 'wo',
                    number:44
                }, {
                    hiragana: 'ん',
                    romaji: 'nn',
                    number:45
                }
            ]
        },
        methods: {
            createtestkanas: function () {
                this.testkanas = JSON.parse(JSON.stringify(this.kanas));
                this.kanaboxs = JSON.parse(JSON.stringify(this.kanas));
                this.initshowkana();
            },
            initshowkana: function () {
                var randomanswer = Math.ceil(Math.random() * 4);
                var randomkana = Math.floor(Math.random() * this.testkanas.length);
                this.showkana = this.testkanas[randomkana];
                this.answerkanas = [[], [], [], [], []];
                this.answerkanas[0] = randomanswer;
                this.colorbutton = [[], [], [], [], []];
                this.answered = false;
                this.testkanas.splice(randomkana, 1);
                this.kanaboxs.splice(this.showkana.number, 1);
                this.autoPlay();
                switch (randomanswer) {
                    case 1 :
                        this.answerkanas[1] = this.showkana;
                        this.answerrandom(2);
                        this.answerrandom(3);
                        this.answerrandom(4);
                        break;
                    case 2 :
                        this.answerrandom(1);
                        this.answerkanas[2] = this.showkana;
                        this.answerrandom(3);
                        this.answerrandom(4);
                        break;
                    case 3 :
                        this.answerrandom(1);
                        this.answerrandom(2);
                        this.answerkanas[3] = this.showkana;
                        this.answerrandom(4);
                        break;
                    case 4 :
                        this.answerrandom(1);
                        this.answerrandom(2);
                        this.answerrandom(3);
                        this.answerkanas[4] = this.showkana;
                        break;
                }
                this.remainder = this.testkanas.length;
            },
            answerrandom : function (number) {
                var wrongkana = Math.floor(Math.random() * this.kanaboxs.length);
                this.answerkanas[number] = this.kanaboxs[wrongkana];
                this.kanaboxs.splice(wrongkana,1);
            },
            wronganswercolor : function (a,b,c) {
                this.colorbutton[a].color = "btn-danger";
                this.colorbutton[b].color = "btn-danger";
                this.colorbutton[c].color = "btn-danger";
            },
            validate: function (answer) {
                if (this.answered !== true) {
                    switch (this.answerkanas[0]) {
                        case 1:
                            this.colorbutton[1].color = "btn-success";
                            this.wronganswercolor(2,3,4);
                            break;
                        case 2:
                            this.colorbutton[2].color = "btn-success";
                            this.wronganswercolor(1,3,4);
                            break;
                        case 3:
                            this.colorbutton[3].color = "btn-success";
                            this.wronganswercolor(1,2,4);
                            break;
                        case 4:
                            this.colorbutton[4].color = "btn-success";
                            this.wronganswercolor(1,2,3);
                            break;
                    }
                    this.colorbutton[0].disabled = "disabled";
                    this.answered = true;
                    this.kanaboxs = JSON.parse(JSON.stringify(this.kanas));
                    if (answer == this.answerkanas[0]) {
                        this.rightkananumber += 1;
                        if (this.testkanas.length == 0) {
                            this.isOver = true;
                        } else {
                            setTimeout(this.initshowkana,1000);
                        }
                    } else {
                        this.wrongkananumber += 1;
                        this.wrongkanas.push(this.showkana);
                        if (this.testkanas.length == 0) {
                            this.isOver = true;
                        } else {
                            setTimeout(this.initshowkana,1000);
                        }
                    }
                }else {}
            },
            autoPlay :function () {
                this.voice =  "http://fanyi.baidu.com/gettts?lan=jp&text=" + this.showkana.hiragana + "&source=web";
                setTimeout(this.AutoPlay);
            },
            AutoPlay : function () {
                var audio = document.querySelector("#autoPlay");
                audio.play();
            },
            playvoice: function (hiragana) {
                this.voice = "http://fanyi.baidu.com/gettts?lan=jp&text=" + hiragana + "&source=web";
                setTimeout(this.Play,0);
            },
            Play : function(){
                var audio = document.querySelector("#playVoice");
                audio.play();
            }

        },
        created: function () {
            this.createtestkanas();
        }
    });
</script>
</body>
</html>